<template>
    <div class="page-box">
        <div class="page-search">
            <div>
               <label>请假类型</label>
               <el-select v-model="searchForm.LeaveType" placeholder="请选择产品单位">
                     <el-option v-for="item in BpmOaLeaveList" :key="item.Id" :label="item.LeaveType" :value="item.LeaveType"></el-option>
                </el-select>
            </div>
             <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>

        <div class="page-section">
            <div class="page-tool">
                <el-button type="primary"  plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                <el-button type="danger"  plain icon="el-icon-delete" @click="dels" size="small">批量删除</el-button>
                <el-dropdown class="mg-l">
                            <el-button size="small" type="primary" plain>
                                <i class="el-icon-s-grid"></i> 
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
            </div>

            <el-table :data="tableData"  ref="dataForm"   v-loading="isLoading"  height="calc(100vh - 350px)">
                <el-table-column  type="selection" width="55"></el-table-column>
                <el-table-column  fixed prop="EmployeesName" label="职工姓名" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="LeaveType" label="请假类型" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Reason" label="请假原因" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="StartTime" label="开始时间" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.StartTime | formatDateTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="EndTime" label="结束时间" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.EndTime | formatDateTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="Day" label="请假天数" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Result" label="请假结果" :show-overflow-tooltip="true">
                     <template slot-scope="scope">
                        <el-tag type="warning" v-if="scope.row.Result == '0'">进行中</el-tag>
                        <el-tag type="success" v-else-if="scope.row.Result == '1'">已审批</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.Result == '2'" >已拒绝</el-tag>
                    </template>
                </el-table-column>
                <el-table-column  prop="WorkflowId" label="流程Id" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column   label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row)">编辑</el-button>
                        <el-button type="text" @click="del(scope.row)" :disabled="Number(scope.row.Result)==1">删除</el-button>
                    </template>
                </el-table-column>  
            </el-table>

         <Pagination :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
                
        </div>

        <!--弹窗-->
        <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
            width="35%" @close="closeDialog">
            <BpmOaLeaveInput :model="model" :isUpdate="isUpdate" @callback="callback"
                v-if="dialogDomain.dialogVisible" />
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue';
import BpmOaLeaveInput from './components/BpmOaLeaveInput.vue';
export default {
  components: { 
    BpmOaLeaveInput,
    Pagination
   },
    mounted(){
        this.dataBind();
    },
    data(){
        return{
            BpmOaLeaveList:[],
            searchForm:{
                LeaveType:'',
            },

            //对话框对象
            dialogDomain:{
                title:'新增请假申请',
                dialogVisible:false
            },
            isUpdate:false,
            //数据模型
            model:{
                EmployeesId:'',
                EmployeesName:'',
                LeaveType:'',
                Reason:'',
                StartTime:'',
                EndTime:'',
                Day:'',
                Result:'0',
                WorkflowId:'',
            },

            pageDomain:{
                PageIndex:1,
                PageSize:10,
                TotalCount:0
            },
            tableData:[],
            isLoading:false
        }
    },
    created(){
        this.getBpmOaLeaveData();
    },
    methods:{
        add(){
            this.dialogDomain.title="新增请假申请";
            this.dialogDomain.dialogVisible=true;
            this.isUpdate=false;
        },
        update(model){
            this.dialogDomain.title="编辑请假申请";
            this.dialogDomain.dialogVisible=true;
            this.isUpdate=true;
            model.Result=model.Result.toString();
            this.model = model;
        },
        //批量删除
        dels() {
            if (this.$refs.dataForm.selection.length <= 0) {
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {

                    //获取选中的表格数据 并筛选id
                    var ids = this.$refs.dataForm.selection.map(x => x.Id)

                    //拼接参数
                    let params = new URLSearchParams();
                    params.append('ids', ids.join(','))

                    this.$http.delete('/api/BpmOaLeave/DelAll', {
                        data: params,
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        },
                        loading: this.$loading()
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });

        },

        //删除单条
        del(model) {
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.delete('/api/BpmOaLeave', {
                        data: {
                            id: model.Id
                        },
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });
        },
//导出
    exports(){
      this.$confirm('即将导出报表，是否继续？', '系统提示', {
                confirmButtonText: '导出',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.request({
                    method: "GET",
                    loading:this.$loading(),
                    url: "/api/BpmOaLeave/Export",
                    responseType: 'blob'
                }).then((res)=>{
                    const blob = new Blob([res])
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '请假申请表信息.xls'; //下载后文件名
                    downloadElement.click(); //点击下载
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
                

            }).catch((err)=>{
                console.log(err);
            })
    },
        closeDialog(){
            this.model={
                EmployeesId:'',
                EmployeesName:'',
                LeaveType:'',
                Reason:'',
                StartTime:'',
                EndTime:'',
                Day:'',
                Result:'0',
                WorkflowId:'',
            }
        },

        search(){
            this.pageDomain.PageIndex=1;
            this.dataBind();
        },
        reset(){
            this.searchForm.LeaveType='';
        },

        callback(){
           let actionName = this.isUpdate ? '编辑' : '新增';
            this.showNotify(actionName + '请假申请成功', 'success');
            this.dialogDomain.dialogVisible = false;
            this.dataBind();
        },
        //分页方法
        handleSizeChange(val){
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val){
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },
        getBpmOaLeaveData() {
            this.$http.get('/api/BpmOaLeave/GetAll')
                .then(res => {
                    this.BpmOaLeaveList=res.Data;
                })
        },

   //获取数据
        dataBind() {
            this.isLoading = true;
            this.$http.get('/api/BpmOaLeave',
                {
                    params: {
                        PageIndex: this.pageDomain.PageIndex,
                        PageSize: this.pageDomain.PageSize,
                        LeaveType: this.searchForm.LeaveType,
                    }
                })
                .then(res => {
                    this.tableData = res.Data;
                    this.pageDomain.TotalCount = res.Count;
                    this.isLoading = false;
                })
        }

          
    }
}
</script>

<style scoped></style>
